<template>
    <div
        class="SpringItem"
        :class="{}"
        :style="{
            width: `${springPost.width}px`,
            height: `${springPost.height}px`,
            left: `${springPost.x - springData.paddingL}px`,
            top: `${springPost.y - springData.paddingL}px`,
        }"
        @click="
            stopPTFS($event);
            springClickFS();
        "
        @mouseover="
            stopPTFS($event);
            springMouseoverFS();
        "
        @mouseout="
            stopPTFS($event);
            springMouseoutFS();
        "
    >
        <span
            class="topCenter"
            :style="{
                width: `${springData.padding}px`,
                height: `${springData.padding}px`,
                background: springData.background,
            }"
            @click="
                stopPTFS($event);
            "
            @mouseover="
                stopPTFS($event);
                spiritLineFS('topCenter', 'mouseover');
            "
            @mouseout="
                stopPTFS($event);
                spiritLineFS('topCenter', 'mouseout');
            "
        ></span>

        <span
            class="rightCenter"
            :style="{
                width: `${springData.padding}px`,
                height: `${springData.padding}px`,
                background: springData.background,
            }"
            @click="
                stopPTFS($event);
            "
            @mouseover="
                stopPTFS($event);
                spiritLineFS('rightCenter', 'mouseover');
            "
            @mouseout="
                stopPTFS($event);
                spiritLineFS('rightCenter', 'mouseout');
            "
        ></span>

        <span
            class="bottomCenter"
            :style="{
                width: `${springData.padding}px`,
                height: `${springData.padding}px`,
                background: springData.background,
            }"
            @click="
                stopPTFS($event);
            "
            @mouseover="
                stopPTFS($event);
                spiritLineFS('bottomCenter', 'mouseover');
            "
            @mouseout="
                stopPTFS($event);
                spiritLineFS('bottomCenter', 'mouseout');
            "
        ></span>

        <span
            class="leftCenter"
            :style="{
                width: `${springData.padding}px`,
                height: `${springData.padding}px`,
                background: springData.background,
            }"
            @click="
                stopPTFS($event);
            "
            @mouseover="
                stopPTFS($event);
                spiritLineFS('leftCenter', 'mouseover');
            "
            @mouseout="
                stopPTFS($event);
                spiritLineFS('leftCenter', 'mouseout');
            "
        ></span>
    </div>
</template>

<script>
// @ is an alias to /src
export default {
    name: 'SpringItem',
    components: {},
    data() {
        return {
            springPost: {
                width: 0,
                height: 0,
                x: 0,
                y: 0,
            },
        };
    },
    props: {
        springData: {
            // 元素数据
            type: Object,
            default: () => {
                return {};
            },
        },
        selectSpring: {
            // 是否选中
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    mounted() {
        this.initFS();
    },
    methods: {
        initFS() {
            this.springPost.width = this.springData.SVG.getBBox().width;
            this.springPost.height = this.springData.SVG.getBBox().height;
            this.springPost.x = this.springData.x;
            this.springPost.y = this.springData.y;
        },
        stopPTFS(e) {
            e.stopPropagation();
            e.preventDefault();
        },
        springClickFS() {
            this.springData.selectMindMapFS(1);
        },
        springMouseoverFS() {
            this.springData.selectMindMapFS(2);
        },
        springMouseoutFS() {
            // 小圆点点击事件
            this.springData.selectMindMapFS(3);
        },
        spiritLineFS(key, action) {
            this.springData.mindSpiritLineFS(key, action);
        },
    },
};
</script>

<style lang="scss" scoped>
@media (prefers-color-scheme: dark) {
}
@media (prefers-color-scheme: light) {
}

.SpringItem {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
        .rightCenter,
        .leftCenter,
        .bottomCenter,
        .topCenter {
            opacity: 0.5;
        }
    }

    .rightCenter,
    .leftCenter,
    .bottomCenter,
    .topCenter {
        position: absolute;
        margin: auto;
        opacity: 0.1;
        transition: all 0.3s;
        border-radius: 100%;
        &:hover {
            opacity: 1;
        }
    }
    .rightCenter {
        top: -2px;
        right: -20px;
        bottom: 0;
    }
    .leftCenter {
        top: -2px;
        left: -16px;
        bottom: 0;
    }
    .topCenter {
        right: 0px;
        left: 0px;
        top: -16px;
    }
    .bottomCenter {
        right: 0px;
        left: 0px;
        bottom: -20px;
    }
}
</style>
